<template>
	<el-drawer title="表单脚本" v-model="visible" :size="1300" :lock-scroll="false" :modal="true" append-to-body destroy-on-close :close-on-click-modal="false" :before-close="closed">
		<el-main class="page">
			<el-header style="padding: 0px; margin-bottom: 10px;">
				<div class="left-panel">
					<el-page-header content="脚本代码" @back="closed"/>
				</div>
				<div class="right-panel">
					<el-button type="info" icon="el-icon-flag" @click="onSave()">保存脚本</el-button>
					<el-button type="primary" icon="el-icon-finished" @click="onOk()">保存并关闭</el-button>
				</div>
			</el-header>
			<el-row :gutter="20">
				<el-col :span="4">
					<el-scrollbar :height="height+20">
						<el-card shadow="never" class="box-card">
							<template #header>
								<div class="card-header">
									<span>表单 FormEvent</span>
								</div>
							</template>
							<div 
								v-for="(item,index) in elementList"
								:key="index" 
								class="element-item" 
								:class="element==item.value?'active':''"
								@click="btnScript(item)"
								>
								{{ item.label }}({{ item.value }})
							</div>
						</el-card>
						<el-card shadow="never" class="box-card">
							<template #header>
								<div class="card-header">
									<span>变量 Variables</span>
								</div>
							</template>
							<div 
								v-for="(item,index) in variableList"
								:key="index" 
								class="element-item"
								style="text-align: left; padding-left: 15px;"
								@click="btnVariable(item)"
								>
								{{ item.label }}
							</div>
						</el-card>
					</el-scrollbar>
					
				</el-col>
				<el-col :span="20" v-loading="loading">
					<jd-code-editor ref="coder" v-bind="$attrs" v-model="value" :height="height" :options="options"></jd-code-editor>
					<el-alert description="您可以使用标准的JavaScript语法，例如console.log输出日志用于调试" type="success" :closable="false" style="padding: 5px 0px"/>
				</el-col>
			</el-row>
		</el-main>
	</el-drawer>
</template>

<script>
	import { ElMessage } from 'element-plus';
	import { defineAsyncComponent } from 'vue';
	const jdCodeEditor = defineAsyncComponent(() => import('@/components/jdCodeEditor'));

	export default {
		name: "ForScript",
		props: {
			script: { type: Object, default: () => {} },
			variables: { type: Object, default: () => {} },
		},
		components: {
			jdCodeEditor,
		},
		emits: ['success', 'closed'],
		data() {
			return {
                options:{
                    
                },
				visible: false,
				loading: false,
				height: window.innerHeight - 230,
				element: 'onLoad',
				elementItem: null,
				elementList: [],
				variableList: [],
				value: null,

                mountedScript: 
`function(that){
	//设置字段值
	//that.setValue({DHWB:'Hello'})
	//that.form.DHWB = new Date().getTime();
}`,
				submitScript: 
`function(formData, that){
	//console.log('jPortal表单提交',that);
}`,
			}
		},
		created() {

		},
		methods: {
			// 显示脚本
			open(formVal){
				// 表单脚本事件
				var mountedJs = formVal.mounted!=null?formVal.mounted.toString():this.mountedScript;
				this.elementItem = {
					label: '表单加载',
					value: 'onLoad',
					data: mountedJs
				};
				this.elementList.push(this.elementItem);

				var submitJs = formVal.onSubmit!=null?formVal.onSubmit.toString():this.submitScript;
				this.elementItem = {
					label: '表单提交',
					value: 'onSubmit',
					data: submitJs
				};
				this.elementList.push(this.elementItem);

				this.element = 'onLoad';
				this.value = mountedJs;

				// 加载系统常量
				this.variableList = this.variables;
				this.visible = true;
				return this
			},
			// 切换脚本
			btnScript(element){
				this.loading = true;
				this.element = element.value;
				this.value = element.data;
				this.loading = false;
			},
			// 系统变量
			btnVariable(element){
				//this.value = this.value + "\r\n"+ element.label +" "+ element.value;
				this.$refs.coder.setVariables(element.value)
				this.copyToClipboard(element.value)
			},
			// 保存脚本
            onSave(){
				this.$emit('success', true, this.element, this.value);
				ElMessage({
					message: '保存成功',
					type: 'success',
				})
            },
            // 保存并关闭
            onOk(){
                this.visible = false;
				this.$emit('success', false, this.element, this.value);
            },
			// 关闭脚本编辑
			closed(){
				this.visible = false;
				this.$emit('closed', false);
			},
			// 复制系统常量
			copyToClipboard(content) {
				if (window.clipboardData) {
					window.clipboardData.setData("text", content);
				} else {
					(function (content) {
						document.oncopy = function (e) {
							e.clipboardData.setData("text", content);
							e.preventDefault();
							document.oncopy = null;
						};
					})(content);
					document.execCommand("Copy");
				}
				ElMessage({
					message: '变量['+content+']已复制',
					type: 'success',
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
.element-item{
	width: 100%;
	height: 35px;
	line-height: 35px;
	font-size: 14px;
	border: solid 1px #e4e7ed;
	text-align: center;
	margin: 5px 0px; 
	cursor: pointer;
}
.element-item:hover{
	background: #409eff;
	color: #FFFFFF;
}
.active{
	background: #409eff;
	color: #FFFFFF;
}

.box-card ::v-deep .el-card__header{
	padding: 10px 10px 0px 10px;
}
.box-card ::v-deep .el-card__body {
  padding: 10px;
}
</style>